<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>enrollment</title>
  <script type="text/javascript" src="js/getRequest.js"></script>
  <script type="text/javascript">
  var isIE8 = myBrowser();
  if (isIE8) {
    document.write("<link href='css/bootstrap-common.min.css' rel='stylesheet'>"); 
  } else {
    document.write("<link href='"+ onlineURL +"plugins/bootstrap/css/bootstrap.min.css?v=170418' rel='stylesheet' media='screen'>"); 
  }
  </script>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
  <![endif]-->
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/jquery.min.js?v=170418'><\/script>"); 
  </script>
  <script type="text/javascript">
    document.write("<script src='"+ onlineURL +"plugins/echarts/echarts.min.js?v=170418'><\/script>"); 
  </script>
</head>

<body>
<div class="container-fluid">
  <h3>录取注册情况</h3>
  <div id="enrollment" class="content">
    <div class="top row">
      <div class="inline-item col-lg-4 col-md-4 col-sm-4">
        <div class="item-parent text-center">
          <div class="item-child">
            <p><span class="text-mute">录取人数</span></p>
            <p><span id="admin_num" class="text-number"></span><span class="mute"> 人</span></p>
          </div>
        </div>
      </div>
      <div class="inline-item col-lg-4 col-md-4 col-sm-4">
        <div class="item-parent text-center">
          <div class="item-child">
            <p><span class="text-mute">注册人数</span></p>
            <p><span id="registered_num" class="text-number"></span><span class="mute"> 人</span></p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="middle">
      <h4>数据分析</h4>
      <div id="columnar"></div>
    </div>

    <div class="bottom">
      <h4>数据统计</h4>
      <div id="table">
        表格
      </div>
    </div>    
  </div>
</div>

<script id="myTable" type="text/html">
<table class="table table-bordered table-condensed text-center">
  <tbody>
    <tr class="text-center">
      <th class="text-center">函授站</th>
      <th class="text-center">录取人数</th>
      <th class="text-center">注册人数</th>
    </tr>
    {{each pageMaplist as value i}}
    <tr class="text-center">
      <td class="text-center">{{value.stationname}}</td>
      <td class="text-center">{{value.adminum}}</td>
      <td class="text-center">{{value.regnum}}</td>
    </tr>
    {{/each}}
    </tbody>
  </table>
</script>

<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript">

$(function() {

  var tableHtml = '',
      parameters = getParameters(),
      thisUrl = getSite(),
      itemSystem = {itemSystemIds:'2c9091fd58f5da520158f5da56b4000a;2c9091fd58f5da520158f5da56b5000c'},
      WithoutitemSystem = WithoutitemSystemIds(),
      sumData = Object.assign(itemSystem,WithoutitemSystem);

  $.ajax({
    type: 'GET',
    url: thisUrl,
    data: parameters,
    dataType: 'json',
    success: function(data) {
      var myData = data['pageMaplist'];
      // artTemplate 渲染表格
      getTable(data);

      // 得到柱状图
      getColumnar(myData);
    },
    error: function(data) {
    	  document.write(data.responseText);
      }
  });

  // 总
  $.ajax({
    type: 'GET',
    url: thisUrl,
    data: sumData,
    dataType: 'json',
    success: function(data) {
      var myData = data['pageMaplist'][0];
      $('#admin_num').html(myData.adminum);
      $('#registered_num').html(myData.regnum);
    }
  })
});

function getTable(data) {
  var tableHtml = template('myTable', data);
  $('#table').html(tableHtml),
  $('tr th').css('width','33%');
};

function getColumnar(myData) {
  var myChart = echarts.init(document.getElementById('columnar'));

  var legendArr = ['录取人数', '注册人数'],
      StationNameArr = [],
      regnumArr = [],
      adminumArr = [];

  myData.forEach(function(ele) {
    StationNameArr.push(ele.stationname);
    adminumArr.push(ele.adminum);
    regnumArr.push(ele.regnum);
  });
  
  var option = {
    color: ['#BFD5FF','#DEFDB2'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data:['录取人数','注册人数']
    },
    xAxis: [
        {
            type: 'category',
            data: StationNameArr,
            axisLabel: {
              interval: 0,
              rotate: 15
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#CCCCCC'
              }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                formatter: '{value} 人'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#CCCCCC'
              }
            }
        }
        
    ],
    series: [
        {
            name:'录取人数',
            type:'bar',
            data: adminumArr
        },
        {
            name:'注册人数',
            type:'bar',
            data: regnumArr
        }
    ]
  };
  myChart.setOption(option);

  // addEvent() 函数定义在 getRequest.js 中（兼容ie）
  addEvent(myChart, 'resize', function() {
    myChart.resize();
  });
}
</script>
